import React, {PureComponent} from 'react';
import {Button, Col, Form, Icon, Input, Row, Select} from "antd";

//表单布局
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
const flexCenterWrapper = {display: 'flex', justifyContent: 'center'}
//节点层级数据
const levelList = [
    {value: '1', text: '一级节点'},
    {value: '2', text: '二级节点'},
    {value: '3', text: '三级节点'}
]

//动态节点默认索引
// let defaultIndex = 0, channelValue = "video"

class AddPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            adding: false,
            minus: false
        }
    }

    componentDidMount = async () => {


    }
    onAdding = () => {
        this.setState({
            adding: true
        })
    }

    offAdding = () => {
        this.setState({
            adding: false
        })
    }

    onMinus = () => {
        this.setState({
            minus: true
        })
    }

    offMinus = () => {
        this.setState({
            minus: false
        })
    }


    render() {
        const {
            onChannelSelect,
            onCollectorSelect,
            onLevelSelect,
            onAddClick,
            onDeleteClick,
            collectorList,
            onChannelChange,
            channel,
            form
        } = this.props
        const {name} = channel
        return (
            <div>
                <Form {...layout}>
                    <Row>
                        <Form.Item label="链路名称">
                            {form.getFieldDecorator('channelName', {
                                rules: [{required: true, message: '请输链路名称'}],
                                initialValue: name,
                                // })(<Input placeholder="请输入链路名称" onChange={onChannelChange}/>)}
                            })(<Input placeholder="请输入链路名称"/>)}
                        </Form.Item>
                    </Row>
                    {/*<Row>
            <Form.Item label="链路类型">
              <Select value={channel.channel_type} onChange={onChannelSelect}>
                <Select.Option value="video">电视链路</Select.Option>
                <Select.Option value="audio">广播链路</Select.Option>
              </Select>
            </Form.Item>
          </Row>*/}
                </Form>
                <Row>
                    <Col span={9} style={flexCenterWrapper}>节点层级</Col>
                    <Col span={9} style={flexCenterWrapper}>监测点名称</Col>
                    <Col span={2} offset={3}><Button loading={this.state.adding} type={"primary"}
                                                     onClick={() => {
                                                         this.onAdding()
                                                         onAddClick(this.offAdding)
                                                     }}>添加</Button></Col>
                </Row>
                {

                    Array.isArray(channel.nodes) && channel.nodes.map((node, rowIndex) => {
                        return (
                            <Row key={rowIndex} style={{marginTop: '10px'}} type="flex" align="middle">
                                <Col span={9} style={flexCenterWrapper}>
                                    <Select value={node.level + ""} style={{width: '80%'}} onSelect={onLevelSelect}>
                                        {
                                            levelList.map((item, key) => {
                                                return (
                                                    <Select.Option key={item.value} value={item.value}
                                                                   node-index={rowIndex}
                                                    >{item.text}</Select.Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </Col>
                                <Col span={11} style={flexCenterWrapper}>
                                    <Select value={node.collector} style={{width: '100%'}}
                                            onSelect={onCollectorSelect}>
                                        {
                                            collectorList.map(item => {
                                                return <Select.Option key={item.url} value={item.url}
                                                                      node-index={rowIndex}
                                                >{item.name}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </Col>
                                <Col span={1} offset={1} style={{display: 'flex'}}>
                                    <Button size={"small"} shape="circle" loading={this.state.minus} icon="minus"
                                            onClick={() => {
                                                this.onMinus()
                                                onDeleteClick(rowIndex, this.offMinus)
                                            }}></Button>
                                </Col>
                            </Row>
                        )
                    })
                }
            </div>
        )
    }
}

export default AddPage;
